<template>
  <!-- 检测管理组件 -->
  <div class="detect_box" v-show="showDetect">
    <!-- <div>
      <div :class="imgStyle" @click="toggleCollapse()">
        <img src="@/assets/images/亮色风格图集/向右.png" alt="" />
      </div>
    </div> -->
    <transition name="fade">
      <div
        :style="toggle"
        v-if="isCollapse"
        style="width: 350px; height: 590px"
      >
        <div class="detect_box_title">检测</div>
        <div class="close_btn" @click="closeQuery">×</div>
        <!-- <div class="XF_second">
          <vxe-input
            clearable
            v-model="demo1.value300"
            placeholder="请输入完整要素编码"
            type="search"
            @search-click="searchID"
          ></vxe-input>
        </div> -->
        <div class="first_line" style="display: none">
          <div>
            <input
              @focus="addSdefault"
              @blur="addStart"
              class="time_input"
              id="start_time_choose"
              type="date"
              name="start_time"
              value=""
            />
          </div>
          <span>—</span>
          <div>
            <input
              @blur="addEnd"
              id="end_time_choose"
              type="date"
              name="end_time"
              value=""
            />
          </div>
        </div>
        <!-- <div class="second_line">
          <div class="second_line_a">缺陷等级:</div>
          <div class="second_line_b">
            <el-checkbox
              v-model="checkAll"
              :indeterminate="isIndeterminate"
              @change="handleCheckAllChange"
            >
              全选
            </el-checkbox>
          </div>
          <div class="second_line_c">
            <el-checkbox-group
              v-model="checkedCities"
              @change="handleCheckedCitiesChange"
            >
              <el-checkbox v-for="city in cities" :key="city" :label="city">
                {{ city }}
              </el-checkbox>
            </el-checkbox-group>
          </div>
        </div>
        <div class="third_line">
          <span class="third_line_a">是否显示图层:</span>
          <div class="el-span">
            <el-switch v-model="value1" @change="switchMap" />
          </div>

          <button value="查询" @click="getInfo">查询</button>
          <el-progress
            :percentage="percentage"
            color="#409eff"
            class="jdt_nr"
            v-show="jdt"
          ></el-progress>
        </div> -->
        <div class="vxe_table_box">
          <div class="el_tree">
            <!--  :loading="loadingJC" -->
            <vxe-table
              stripe
              show-overflow
              height="540"
              :header-row-style="{
                background: '#26a1ff',
                color: '#fff',
                height: 20,
              }"
              :sync-resize="demo1.value5"
              :data="tableData"
              :row-config="{ isCurrent: true, isHover: true, height: 30 }"
              :column-config="{ resizable: true }"
              :tree-config="{
                transform: true,
                rowField: 'featId',
                parentField: 'eidPlus',
              }"
              @current-change="handleRowClick"
              ref="xTable"
            >
              <!--  stripe
            show-overflow
            :loading="loadingJC"
            height="235"
            :header-row-style="{
              background: '#26a1ff',
              color: '#fff',
              height: 20,
            }"
            :sync-resize="demo1.value5"
            :data="tableData"
            :row-config="{ isCurrent: true, isHover: true, height: 30 }"
            :column-config="{ resizable: true }"
            :tree-config="{
              transform: true,
              rowField: 'featId',
              parentField: 'region',
            }"
            @current-change="handleRowClick"
            @toggle-tree-expand="toggleExpandChangeEvent"
            ref="xTable" -->
              <vxe-column
                field="featId"
                title="工程区域"
                width="230"
                tree-node
              ></vxe-column>

              <vxe-column
                field="detectionTarget"
                title="工程单位"
                width="120"
              ></vxe-column>
              <!-- <vxe-column
                field="defectType"
                title="缺陷类型"
                width="100"
              ></vxe-column>
              <vxe-column
                field="defectPosition"
                title="缺陷位置"
                width="80"
              ></vxe-column>
              <vxe-column
                field="defectLevel"
                title="缺陷等级"
                width="80"
              ></vxe-column>
              <vxe-column
                field="pipeSegmentMaterial"
                title="管网材质"
                width="80"
              ></vxe-column>
              <vxe-column
                field="​pavementType"
                title="路面类型"
                width="100"
              ></vxe-column>

              <vxe-column
                field="testingAddress"
                title="道路名称"
                width="100"
              ></vxe-column>
              <vxe-column
                field="testingCompany"
                title="检测部门"
                width="100"
              ></vxe-column>
              <vxe-column
                field="testingDate"
                title="检测时间"
                width="100"
              ></vxe-column>

              <vxe-column
                field="testingReport"
                title="检测报告"
                width="100"
              ></vxe-column>
              <vxe-column field="remarks" title="备注" width="100"></vxe-column> -->
            </vxe-table>
          </div>
        </div>

        <!-- <vxe-pager
          :align="center"
          :size="mini"
          background
          :current-page="tablePage.currentPage"
          :page-size="tablePage.pageSize"
          :total="tablePage.totalResult"
          :layouts="['PrevPage', 'JumpNumber', 'NextPage']"
          @page-change="handlePageChange"
        >
      </vxe-pager> -->
        <!--  :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Total']" -->

        <!-- <div class="open_btns">
          <button @click="openPic">检测图片</button>
          <button @click="openReport">检测报告</button>
          <button @click="openVideo">检测视频</button>
        </div> -->
      </div>
    </transition>
  </div>

  <div class="picPop">
    <vxe-modal
      :mask="false"
      :lock-view="false"
      v-model="demo1.value6"
      width="650"
      height="500"
    >
      <template #title>
        <div style="font-size: 22px">图片</div>
      </template>
      <template #default>
        <div class="guild_img_box">
          <div v-show="single" style="width: 100%; height: 100%">
            <img
              v-viewer
              :src="testPhotoUrl"
              alt=""
              style="width: 100%; height: 100%"
            />
          </div>
          <div v-show="poly" class="poly" style="width: 100%; height: 100%">
            <el-carousel>
              <el-carousel-item v-for="item in images" :key="item.id">
                <img :src="item.originalUrl + item.pic" class="bannerimg" />
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
      </template>
    </vxe-modal>
    <vxe-modal
      :mask="false"
      :lock-view="false"
      v-model="demo1.value7"
      width="900"
      height="500"

    >
      <template #title>
        <div style="font-size: 22px">报告</div>
      </template>
      <template #default>
        <div class="testReport" style="width: 100%; height: 100%">
          <iframe :src="testReportUrl" width="100%" height="100%">
            该浏览器无法支持PDF,请点击查看：
            <a :href="testReportUrl">下载 PDF</a>
          </iframe>
        </div>
      </template>
    </vxe-modal>
    <vxe-modal
      :mask="false"
      :lock-view="false"
      v-model="demo1.value8"
      width="800"
      height="500"
  
    >
      <template #title>
        <div>
          <span style="margin-right: 25px; margin-left: 15px">视频</span>
          <!-- 下拉菜单 -->
          <el-select
            v-model="movieValue"
            class="m-2"
            placeholder="下拉视频"
            @change="movieChange"
          >
            <el-option
              v-for="item in movieOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
      </template>
      <template #default>
        <div style="width: 100%; height: 100%">
          <embed width="100%" height="100%" :src="testVideoUrl" />
        </div>
      </template>
    </vxe-modal>
  </div>
</template>

<script setup>
import { Map } from 'ol'
import View from 'ol/View.js'
import 'ol/ol.css'
import VectorLayer from 'ol/layer/Vector.js'
import VectorSource from 'ol/source/Vector.js'
import { Stroke, Style, Circle, Fill } from 'ol/style'
import Text from 'ol/style/Text.js'
import Feature from 'ol/Feature.js'
import Point from 'ol/geom/Point.js'
import LineString from 'ol/geom/LineString.js'
import Polygon from 'ol/geom/Polygon.js'
import Draw, { createBox, createRegularPolygon } from 'ol/interaction/Draw.js'
import * as turf from '@turf/turf' //引入turf做buffer缓冲区分析
import { composeCssTransform } from 'ol/transform'
import { transform } from 'ol/proj'
import { onMounted, ref, toRaw, reactive, watch } from 'vue'
import { VXETable } from 'vxe-table'
import Icon from 'ol/style/Icon.js'
import { require } from '@/utils/require'
import {
  getJCGLInfo,
  getJCGLSearch,
  getJCWhole,
  getXFSearch,
  getXFInfo,
  getSpatialInfo,
  getPipePointInfo,
  getPipeInfo,
} from '@/api/index'
import $ from 'jquery'
import axios from 'axios'
//使用mitt进行任意组件通信
import emitter from '@/utils/bus'
// 引入饿了么UI
import 'element-plus/es/components/message/style/css'
import { ElMessage } from 'element-plus'
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'
// 引入echarts
import * as echarts from 'echarts'
//测试用菠萝存储地图容器
import {
  userMap,
  mapStyle,
  switchList,
  switchList7,
} from '../../../../store/index'
import XEUtils from 'xe-utils'
let map = userMap() //接收
let storeStyle = mapStyle() //接受样式
let storeSwitch = switchList()
// 控制检测菜单显隐
const showDetect = ref(false)
let storeDetect = switchList7()
let changeDetect
watch(storeDetect, () => {
  changeDetect = toRaw(storeDetect)
  showDetect.value = true
})
const closeQuery = () => {
  showDetect.value = false
  changeDetect.queryBtn = false
}
let list
let switchStyle
let switchOpinion
let toggleStatus
// 空间查询树控件飞行图层-线
let treeLineLayer
let treeLineSource
let treeLineFeature
// 单线起点
let PipeXsource
let PipeXLayer
let PipeXFeature
// 单线终点
let PipeYsource
let PipeYLayer
let PipeYFeature
// 单线缓冲区
let PipeLinesource
let PipeLineLayer
let PipeLineFeature
// 时间内全部管线
let Pipesource
let PipeLayer
let PipeFeature

// 控制弹窗信息
const tableData = ref([])

// 检测进度条
const loadingJC = ref(false)
// 修复进度条
const loading = ref(true)
// input时间信息
const start_time_choose = ref()
const end_time_choose = ref()
const demo1 = reactive({
  // 检测管理
  value5: false,
  value6: false,
  value7: false,
  value8: false,
  value300: '',
  // 修复管理
  value9: false, //弹窗与表单
  value10: false, //视频
  value11: false, //报告
  value12: false, //图片
  value400: '', //input框
})
// 检测管理分页
const tablePage = reactive({
  currentPage: 1,
  pageSize: 13,
  totalResult: 0,
})
// 缺陷等级
const defectLevel = ref("'1','2','3','4'")
// 多选框信息
const checkAll = ref(true)
const isIndeterminate = ref(true)
const checkedCities = ref(['1级', '2级', '3级', '4级'])
const cities = ['1级', '2级', '3级', '4级']

// 控制菜单折叠
const isCollapse = ref(true)
const toggle = ref({
  width: '350px',
})
// 控制弹窗信息
const imgStyle = ref({
  go: false,
  aa: true,
})
// 监听储存桶中值的变化
// watch(
//   storeSwitch,
//   () => {
//     switchOpinion = toRaw(storeSwitch.opinionBtn)
//     // console.log('switchOpinion', switchOpinion)
//     if (switchOpinion == true) {
//       toggleCollapse()
//       storeSwitch.opinionBtn = false
//     } else {
//       console.log('switchOpinion222', switchOpinion)
//     }
//   },
//   {
//     immediate: true,
//   }
// )
const toggleCollapse = () => {
  if (isCollapse.value == true) {
    isCollapse.value = false
    storeSwitch.detectSwitch = isCollapse.value
    imgStyle.value = {
      go: true,
      aa: false,
    }
  } else {
    isCollapse.value = true
    storeSwitch.detectSwitch = isCollapse.value
    imgStyle.value = {
      go: false,
      aa: true,
    }
  }
}
// 改变地图容器大小
// const showChange = ref(false)
// const changeContainer = () => {
//   if (showChange.value == true) {
//     console.log(222)
//     showChange.value = false
//     switchStyle.style.width = '100vw'
//     switchStyle.style.position = 'fixed'
//     switchStyle.style.right = '0px'
//     list.getView().setCenter([24632, 69653])
//   } else {
//     console.log(111)
//     switchStyle.style.width = '50vw'
//     switchStyle.style.position = 'fixed'
//     switchStyle.style.right = '0px'
//     showChange.value = true
//     list.getView().setCenter([70000, 69653])
//   }
// }
onMounted(() => {
  list = toRaw(map.map)
  switchStyle = toRaw(storeStyle.map_style)
  storeSwitch.detectSwitch = isCollapse.value
  openList()
  // 线要素的起点图层
  PipeXsource = new VectorSource({
    wrapX: false,
  })
  PipeXLayer = new VectorLayer({
    source: PipeXsource,
    zIndex: 9999,
    style: new Style({
      image: new Circle({
        radius: 1,
        fill: new Fill({
          color: '#ff0000',
        }),
      }),
    }),
  })
  list.addLayer(PipeXLayer)
  // 线要素的终点图层
  PipeYsource = new VectorSource({
    wrapX: false,
  })
  PipeYLayer = new VectorLayer({
    source: PipeYsource,
    zIndex: 9999,
    style: new Style({
      image: new Circle({
        radius: 1,
        fill: new Fill({
          color: '#ff0000',
        }),
      }),
    }),
  })
  list.addLayer(PipeYLayer)
  // 线要素缓冲区图层(单线)
  PipeLinesource = new VectorSource({
    wrapX: false,
  })
  PipeLineLayer = new VectorLayer({
    source: PipeLinesource,
    style: new Style({
      fill: new Fill({
        color: '#ff0000',
      }),
      // stroke: new Stroke({
      //   color: [0, 0, 0, 1],
      //   width: 5,
      // }),
    }),
    zIndex: 9999,
  })
  list.addLayer(PipeLineLayer)
  // 空间查询图层--飞行--线
  treeLineSource = new VectorSource({
    wrapX: false,
  })
  treeLineLayer = new VectorLayer({
    source: treeLineSource,
    style: new Style({
      fill: new Fill({
        color: '#ff0000',
      }),
      stroke: new Stroke({
        color: '#ff0000',
        width: 4,
      }),
    }),
    zIndex: 9999,
  })
  list.addLayer(treeLineLayer)
  // 全部图层的显隐
  Pipesource = new VectorSource({
    wrapX: false,
  })
  PipeLayer = new VectorLayer({
    source: Pipesource,
    style: new Style({
      fill: new Fill({
        color: '#ff0000',
      }),
      stroke: new Stroke({
        color: '#ff0000',
        width: 3,
      }),
    }),
    zIndex: 9999,
  })
  list.addLayer(PipeLayer)
})
// 打开菜单的同时高亮勾选选中的图标
// 检测管理进度条
const jdt = ref(false)
const percentage = ref(0)
const timeStart = ref('进度条计时')
const pipeArr = ref(null)
const openList = () => {
  // 控制开始时间默认当天往前一个月
  // 控制结束时间默认当天
  $(document).ready(function () {
    var time = new Date()
    var day = ('0' + time.getDate()).slice(-2)
    var month = ('0' + (time.getMonth() + 1)).slice(-2)
    var lastMonth = ('0' + time.getMonth()).slice(-2)
    var lastToday = time.getFullYear() + '-' + lastMonth + '-' + day
    $('#start_time_choose').val(lastToday)
    start_time_choose.value = $('#start_time_choose').val()
    // console.log('开始时间', start_time_choose.value)
    var today = time.getFullYear() + '-' + month + '-' + day
    $('#end_time_choose').val(today)
    end_time_choose.value = $('#end_time_choose').val()
    // console.log('结束时间', end_time_choose.value)
    getInfo()
  })
}
// 进度条方法
const increase = () => {
  timeStart.value = setInterval(() => {
    if (percentage.value < 95) {
      percentage.value += 5
    }
    if (percentage.value > 100) {
      percentage.value = 100
    }
  }, 30)
}
const increaseend = () => {
  percentage.value = 100
  clearInterval(timeStart.value)
  jdt.value = false
}
watch(jdt.value, (value, newValue) => {
  console.log(value + '----newValue----' + newValue)
  if (value) {
    that.increase()
  } else {
    that.increaseend()
  }
})

// 点击取到每行的数据
const xTable = ref()
const testingStartX = ref()
const testingStartY = ref()
const testingEndX = ref()
const testingEndY = ref()
const baseUrl = ref('https://ks.qichenginfo.com/JianCeData')
const region = ref()
const testingCompany2 = ref()
const eid = ref()
const testingPhoto = ref()
const testingVideo = ref()
const testingReport = ref()
const testPhotoUrl = ref()
const testPhoto = ref()
const testVideoUrl = ref()
const testVideo = ref()
const testReportUrl = ref()
// 修复地址
const XFurl = ref()
const XFpic = ref()
const XFreport = ref()
const XFvideo = ref()
const XFeid = ref()
// 树形控件点击事件--点击后飞行并显示样式
const handleNodeClick = (data) => {
  // console.log(data)
  delSearch()
  const treeArr = toRaw(data)
  // console.log('树点击', treeArr)
  if (treeArr.label.length < 8) {
    // console.log('没有点击要素编码不飞行')
  } else {
    if (treeArr.label.length > 14) {
      // console.log('飞行到线', treeArr.label)
      getPipeInfo(treeArr.label).then((res) => {
        // console.log(res)
        const arr = res.data[0]
        dataTree.value = arr
        getPipePointInfo(arr.startId).then((res) => {
          // console.log('线起点', res.data[0].x, res.data[0].y)
          startX.value = res.data[0].x
          startY.value = res.data[0].y
          // const obj = { startX: res.data[0].x, startY: res.data[0].y }
          lineArr.value.push([startX.value, startY.value])
        })
        getPipePointInfo(arr.endId).then((res) => {
          // console.log('线终点', res.data[0].x, res.data[0].y)
          endX.value = res.data[0].x
          endY.value = res.data[0].y
          // const obj = { endX: res.data[0].x, endY: res.data[0].y }
          lineArr.value.push([endX.value, endY.value])
          test.value.push([endX.value, endY.value])
        })

        // 空间查询--mian栏--详细信息
        tableDataXX.value = [
          {
            date: '起点要素编码',
            name: arr.startId,
          },
          {
            date: '终点要素编码',
            name: arr.endId,
          },
          {
            date: '材质',
            name: arr.material,
          },
          {
            date: '口径',
            name: arr.caliber,
          },
          {
            date: '规格',
            name: arr.spec,
          },
          {
            date: '起点埋深',
            name: arr.startBurialDepth,
          },
          {
            date: '终点埋深',
            name: arr.endBurialDepth,
          },
          {
            date: '起点内底标高',
            name: arr.startInvertElevation,
          },
          {
            date: '终点内底标高',
            name: arr.endInvertElevation,
          },
          {
            date: '管网类型',
            name: arr.pipeType,
          },
          {
            date: '探测位置',
            name: arr.location,
          },
          {
            date: '探测单位',
            name: arr.probeUnit,
          },
          {
            date: '探测日期',
            name: arr.probeDate,
          },
          {
            date: '归属',
            name: arr.ascription,
          },
          {
            date: '埋设方式',
            name: arr.burialType,
          },
          {
            date: '流向',
            name: arr.flowDirection,
          },
          {
            date: '建造年代',
            name: arr.buildYear,
          },
          {
            date: '是否有压',
            name: arr.isUnderPressure,
          },
          {
            date: '备注',
            name: arr.remark,
          },
          {
            date: '标识',
            name: arr.tag,
          },
        ]
      })
      watch(test.value, () => {
        const a = toRaw(dataTree.value)
        console.log('飞行线坐标', toRaw(lineArr.value))
        const a18 = toRaw(lineArr.value)[0]
        const a19 = toRaw(lineArr.value)[1]
        treeLineFeature = new Feature({
          geometry: new LineString([a18, a19]),
          attributes: [[a.startId], [a.endId]],
        })
        treeLineSource.addFeature(treeLineFeature)
        const x = toRaw(lineArr.value)[0][0]
        const y = toRaw(lineArr.value)[0][1]
        list.getView().animate({
          center: [x, y],
          zoom: 10,
        })
      })
    } else {
      // console.log('飞行到点', treeArr.label)
      getPipePointInfo(treeArr.label).then((res) => {
        const arr = res.data[0]
        console.log(arr)
        // 空间查询--mian栏--详细信息
        tableDataXX.value = [
          {
            date: '要素编码',
            name: arr.featId,
          },
          {
            date: '类别名称',
            name: arr.type,
          },
          {
            date: '地面标高',
            name: arr.groundElevation,
          },
          {
            date: '口径',
            name: arr.caliber,
          },
          {
            date: '井深',
            name: arr.manholeDepth,
          },
          {
            date: '埋深',
            name: arr.burialDepth,
          },
          {
            date: '规格',
            name: arr.spec,
          },
          {
            date: '井盖材质',
            name: arr.manholeCoverMaterial,
          },
          {
            date: '井盖形状',
            name: arr.manholeCoverShape,
          },
          {
            date: '井盖尺寸',
            name: arr.manholeCoverSize,
          },
          {
            date: '探测单位',
            name: arr.probeUnit,
          },
          {
            date: '探测日期',
            name: arr.probeDate,
          },
          {
            date: '探测位置',
            name: arr.location,
          },
          {
            date: '归属',
            name: arr.ascription,
          },
          {
            date: '备注',
            name: arr.remark,
          },
          {
            date: '标识',
            name: arr.tag,
          },
        ]

        treePiontFeature = new Feature({
          geometry: new Point([arr.x, arr.y]),
        })
        if (treePiontFeature.getGeometry() != null) {
          treePiontSource.clear()
        }
        treePiontSource.addFeature(treePiontFeature)
        treePiontFeature.setStyle(function (resolution) {
          //监听分辨率跟随地图缩放
          return [
            new Style({
              image: new Icon({
                anchor: [0.5, 1.2], //锚点
                opacity: 1,
                scale: list.getView().getZoom() / 22,
                // src: require('@/assets/images/mark.png'),
                src: require('../../../public/mark.png'),
              }),
            }),
          ]
        })
        // 飞行
        list.getView().animate({
          center: [arr.x, arr.y],
          zoom: 10,
        })
      })
    }
  }
}

// 检测管理获取时间
const addStart = () => {
  // console.log('开始时间', $('#start_time_choose').val())
  start_time_choose.value = $('#start_time_choose').val()
}
const addEnd = () => {
  // console.log('结束时间', $('#end_time_choose').val())
  end_time_choose.value = $('#end_time_choose').val()
}

// 检测分页--获取页数
const handlePageChange = ({ currentPage, pageSize }) => {
  tablePage.currentPage = currentPage
  tablePage.pageSize = pageSize
  console.log(tablePage.currentPage, tablePage.pageSize)
  getList()
}
// 检测分页--请求
const getList = () => {
  getJCGLInfo(
    tablePage.currentPage,
    tablePage.pageSize,
    defectLevel.value,
    start_time_choose.value,
    end_time_choose.value
  ).then((res) => {
    console.log('检测分页信息', res.data.list)
    const arr = res.data.list
    const _arr = []
    for (let i = 0; i < arr.length; i++) {
      const url = arr[i].eid
      const index = url.lastIndexOf('-')
      const str = url.substring(index + 1, url.length)
      const value = arr[i].testingAddress + '/' + str
      _arr.push(Object.assign({}, arr[i], { eidPlus: value }))
    }
    const obj = XEUtils.groupBy(arr, 'region')
    const arrList = Object.keys(obj)
    for (let i = 0; i < arrList.length; i++) {
      const obj2 = {
        featId: arrList[i],
        // eidPlus: '工程列表',
      }
      _arr.push(obj2)
    }
    const obj3 = XEUtils.groupBy(_arr, 'region')
    const result = []
    const result2 = []
    const result3 = []
    XEUtils.each(obj3, (childs, key) => {
      XEUtils.each(
        XEUtils.groupBy(childs, 'testingCompany2'),
        (childs2, key2) => {
          if (key2 != 'undefined') {
            result2.push({
              featId: key2,
              eidPlus: key,
            })
            _arr.push({
              featId: key2,
              eidPlus: key,
            })
          }
          XEUtils.each(XEUtils.groupBy(childs2, 'eidPlus'), (childs3, key3) => {
            if (key3 != 'undefined') {
              result3.push({
                featId: key3,
                eidPlus: key2,
              })
              _arr.push({
                featId: key3,
                eidPlus: key2,
              })
            }
          })
        }
      )
    })
    // console.log('result2', result2)
    // console.log('result3', result3)
    // console.log(' _arr', _arr)
    tableData.value = _arr

    tablePage.totalResult = res.data.total
  })
}
// 检测搜索按钮
const getInfo = () => {
  // console.log(
  //   tablePage.currentPage,
  //   tablePage.pageSize,
  //   defectLevel.value,
  //   start_time_choose.value,
  //   end_time_choose.value,
  //   demo1.value300
  // )
  // 进度条显示
  jdt.value = true
  loadingJC.value = true
  getJCGLSearch(start_time_choose.value, end_time_choose.value).then((res) => {
    // 进度条值
    percentage.value = 100
    if (res.code == 200) {
      const arr = res.data
      console.log('检测数据', arr)
      // 在数组中添加工程字段
      const _arr = []
      for (let i = 0; i < arr.length; i++) {
        const url = arr[i].eid
        const index = url.lastIndexOf('-')
        const str = url.substring(index + 1, url.length)
        const value = arr[i].testingAddress + '/' + str
        // console.log('添加值', value)
        _arr.push(Object.assign({}, arr[i], { eidPlus: value }))
      }
      const obj = XEUtils.groupBy(arr, 'region')
      const arrList = Object.keys(obj)
      for (let i = 0; i < arrList.length; i++) {
        const obj2 = {
          featId: arrList[i],
          // eidPlus: '工程列表',
        }
        _arr.push(obj2)
      }
      const obj3 = XEUtils.groupBy(_arr, 'region')
      const result = []
      const result2 = []
      const result3 = []
      XEUtils.each(obj3, (childs, key) => {
        XEUtils.each(
          XEUtils.groupBy(childs, 'testingCompany2'),
          (childs2, key2) => {
            if (key2 != 'undefined') {
              result2.push({
                featId: key2,
                eidPlus: key,
              })
              _arr.push({
                featId: key2,
                eidPlus: key,
              })
            }
            XEUtils.each(
              XEUtils.groupBy(childs2, 'eidPlus'),
              (childs3, key3) => {
                if (key3 != 'undefined') {
                  result3.push({
                    featId: key3,
                    eidPlus: key2,
                  })
                  _arr.push({
                    featId: key3,
                    eidPlus: key2,
                  })
                }
              }
            )
          }
        )
      })
      // console.log('result2', result2)
      // console.log('result3', result3)
      // console.log(' _arr', _arr)
      tableData.value = _arr
      console.log('JCarr', _arr)
      tablePage.totalResult = res.data.total
      jdt.value = false
      loadingJC.value = false
    } else {
      console.log('展开检测信息', res)
    }
  })
  /* getJCWhole(start_time_choose.value, end_time_choose.value).then((res) => {
    console.log('检测信息', res)
    if (res.code == 200) {
      const a21 = res.data
      const a22 = []
      a21.forEach((value) => {
        a22.push([
          [value.testingStartX, value.testingStartY],
          [value.testingEndX, value.testingEndY],
        ])
      })
      // console.log('检测全部图层', a22)
      pipeArr.value = a22
    } else {
      console.log(res)
    }
  }) */
}
// 点击单行的操作(飞行与显示点线)
const handleRowClick = (rowIndex) => {
  const $table = xTable.value
  // console.log($table.getCurrentRecord())
  const record = $table.getCurrentRecord()
  const Data = JSON.parse(JSON.stringify(record))

  if (Data && Data.children.length == 0) {
    console.log('单击飞行', Data)
    // 坐标
    testingStartX.value = Data.testingStartX
    testingStartY.value = Data.testingStartY
    testingEndX.value = Data.testingEndX
    testingEndY.value = Data.testingEndY
    // 修复
    XFurl.value = Data.path //检测共用
    XFpic.value = Data.handlePhoto
    XFreport.value = Data.handleReport
    XFvideo.value = Data.handleVideo
    XFeid.value = Data.eid //检测共用
    // 检测
    testPhoto.value = Data.testingPhoto
    testVideo.value = Data.testingVideo
    testReportUrl.value = Data.testingReport

    // 加载起点要素
    PipeXFeature = new Feature({
      geometry: new Point([testingStartX.value, testingStartY.value]),
    })
    if (PipeXFeature.getGeometry() != null) {
      PipeXsource.clear()
    }
    // PipeXsource.addFeature(PipeXFeature)
    // 加载终点要素
    PipeYFeature = new Feature({
      geometry: new Point([testingEndX.value, testingEndY.value]),
    })
    if (PipeYFeature.getGeometry() != null) {
      PipeYsource.clear()
    }
    // PipeYsource.addFeature(PipeYFeature)
    // 加载缓冲区--只有4326可以使用turf
    const arrKSZB = [
      [testingStartX.value, testingStartY.value],
      [testingEndX.value, testingEndY.value],
    ]
    let arr4326 = arrKSZB.map((item) => {
      return transform(item, 'EPSG:KSZB', 'EPSG:4326')
    })
    const lineString = turf.lineString(arr4326)
    // console.log('缓冲区', lineString)
    // 0.1米=0.00006214 英里
    // 0.5米=0.0003107 英里
    const buffer = turf.buffer(lineString, 0.0003107, { units: 'miles' })
    let buffered = buffer.geometry.coordinates[0]
    let testarr = buffered.map((item) => {
      return transform(item, 'EPSG:4326', 'EPSG:KSZB')
    })
    // console.log(testarr)
    PipeLineFeature = new Feature({
      type: 'Polygon',
      geometry: new Polygon([testarr]),
    })
    if (PipeLineFeature.getGeometry() != null) {
      PipeLinesource.clear()
    }
    // PipeLinesource.addFeature(PipeLineFeature)
    // 直接跳转镜头方法
    console.log([Data.startId, Data.endId])
    treeLineFeature = new Feature({
      geometry: new LineString([
        [testingStartX.value, testingStartY.value],
        [testingEndX.value, testingEndY.value],
      ]),
      attributes: [[Data.startId], [Data.endId]],
      attributes2: [Data.featId],
      PointAX: [testingStartX.value, testingStartY.value],
      PointX: [testingEndX.value, testingEndY.value],
    })

    treeLineSource.addFeature(treeLineFeature)
    list.getView().setZoom(9)

    list.getView().setCenter([testingStartX.value, testingStartY.value])
  } else {
    console.log('暂无数据')
  }
}
// featID关键字查询(检测)
const searchID = (value) => {
  getInfo()
}
// 缺陷等级全选反选
const handleCheckAllChange = (val) => {
  checkedCities.value = val ? cities : []
  isIndeterminate.value = false
  const alldata = JSON.parse(JSON.stringify(checkedCities.value))
  // console.log('打印全选', alldata)
  const str = alldata.toString() //把arr数组利用toString()转换为字符串
  // console.log('处理成字符串', str)
  const c = str.replace(/\级|\>|\/|\?]/g, '')
  const b = c.split(',')
  const d = "'" + b.join("','") + "'"
  defectLevel.value = d.toString()
  // console.log('打印选择', defectLevel.value)
}
const handleCheckedCitiesChange = (value) => {
  // console.log('打印选择', value)
  const checkedCount = value.length
  const str2 = value.toString()
  const c2 = str2.replace(/\级|\>|\/|\?]/g, '')
  const b2 = c2.split(',')
  const d2 = "'" + b2.join("','") + "'"
  defectLevel.value = d2.toString()
  // console.log('打印选择', defectLevel.value)
  checkAll.value = checkedCount === cities.length
  isIndeterminate.value = checkedCount > 0 && checkedCount < cities.length
}
//展开图片(检测)
const openPic = () => {
  demo1.value6 = true
  if (testPhoto.value) {
    testPhotoUrl.value = XFurl.value + XFeid.value + '/' + testPhoto.value
    if (testPhoto.value.includes('/') == false) {
      single.value = true
      poly.value = false
      testPhotoUrl.value = XFurl.value + XFeid.value + '/' + testPhoto.value
      console.log('单张图片', testPhoto.value)

      // 子传父
    } else if (testPhoto.value.includes('/') == true) {
      originalUrl.value = XFurl.value + XFeid.value + '/'
      single.value = false
      const a2 = testPhoto.value.split('/')
      const a22 = []
      for (let i = 0; i < a2.length; i++) {
        const obj = { id: i, pic: a2[i], originalUrl: originalUrl.value }
        a22.push(obj)
      }
      images.value = a22
      console.log('多张图片', testPhoto.value)
      // 子传父

      poly.value = true
    } else {
      testPhotoUrl.value = 'https://temp.im/200x200'
      // 子传父
    }

    console.log('图片地址', testPhotoUrl.value)
  } else {
    console.log('未选中')
  }
}
// 展开报告(检测)
const openReport = () => {
  demo1.value7 = true
  if (testReportUrl.value) {
    testReportUrl.value = XFurl.value + XFeid.value + '/' + testReportUrl.value
    console.log('报告地址', testReportUrl.value)
  } else {
    console.log('未选中')
  }
}
// 展开视频(检测)
const openVideo = () => {
  demo1.value8 = true
  if (testVideo.value) {
    if (testVideoUrl.value != undefined) {
      if (testVideo.value.includes('/') == false) {
        originalUrl.value = XFurl.value + XFeid.value + '/'
        const before = testVideo.value.split('.')[0]
        const mp4 = before + '.mp4'
        testVideoUrl.value = originalUrl.value + mp4
        console.log('单个视频', testVideo.value)
      } else if (testVideo.value.includes('/') == true) {
        originalUrl.value = XFurl.value + XFeid.value + '/'
        const a2 = testVideo.value.split('/')
        const a22 = []
        for (let i = 0; i < a2.length; i++) {
          const obj = { value: a2[i], label: a2[i] }
          a22.push(obj)
        }
        movieOptions.value = a22
        // 默认加载第一个视频
        testVideoUrl.value = originalUrl.value + a2[0]
        console.log('多个视频', movieOptions.value)
      } else {
        console.log('无权限视频')
      }
    } else {
      testVideoUrl.value = 'https://temp.im/200x200'
      console.log('暂无视频')
    }
  } else {
    console.log('未选中')
  }
}
const single = ref(true)
const poly = ref(false)
const originalUrl = ref()
const images = ref([])
// 多个视频选择栏
const movieChange = (val) => {
  console.log(val)
  testVideoUrl.value = originalUrl.value + val
}
// 图层开关信息(检测)
const value1 = ref(false)
// 显隐图层开关
const switchMap = () => {
  if (value1.value == true) {
    const a5 = pipeArr.value
    console.log('开', a5)
    for (let i = 0; i < a5.length; i++) {
      PipeFeature = new Feature({
        geometry: new LineString([a5[i][0], a5[i][1]]),
      })
      Pipesource.addFeature(PipeFeature)
    }
  } else if (value1.value == false) {
    console.log('关')
    Pipesource.clear()
  } else {
    console.log('报错')
  }
}
</script>
<style lang="less" scoped>
// 关闭菜单按钮
.close_btn {
  color: #269bff;
  position: absolute;
  font-size: 40px;
  right: 5px;
  top: -10px;
  cursor: pointer;
}
// 旋转按钮
.aa {
  position: absolute;
  background: #ffffff;
  height: 70px;
  width: 8px;
  right: -8px;
  z-index: 9999;
  top: 230px;
  cursor: pointer;
}
.aa img {
  position: absolute;
  top: 30px;
  width: 100%;
  transition: all 0.5s;
}
.go {
  position: absolute;
  background: #ffffff;
  height: 70px;
  width: 8px;
  // right: 0px;
  z-index: 9999;
  top: 230px;
  cursor: pointer;
}
.go img {
  position: absolute;
  top: 30px;
  width: 100%;
  transition: all 0.5s;
  transform: rotate(180deg);
}
/* 检测管理细节 */

.toggle_btn {
  position: absolute;
  background: #000;
  height: 70px;
  width: 7px;
  right: 0px;
  z-index: 9999;
  top: 230px;
  cursor: pointer;
}
.toggle_btn img {
  position: absolute;
  top: 30px;
}
// 标题
.detect_box_title {
  text-align: center;
  background: url('@/assets/images/亮色风格图集/矩形 3.png') no-repeat center
    0px;
  background-position: center -14px;
  height: 48px;
  line-height: 48px;
  border-bottom: 1px solid #c8fdff;
  font-size: 18px;
  font-weight: 600;
  color: #078dff;
}
// 两个时间input框
.first_line input {
  width: 140px;
  height: 30px;
  border: 1px solid #3dabff;
  border-radius: 5px;
  outline: none; //去除默认外框
}
.first_line input:focus {
  outline: 1px solid #3dabff; //更改外框粗细
}
/* 折叠菜单 */
.fade-enter-active,
.fade-leave-active {
  // transition: opacity 1s ease;
  transition: all 0.3s;
}

.fade-enter-from,
.fade-leave-to {
  // opacity: 0;
  // position: absolute;
  // left: -1000px;
  transform: translateX(-350px);
  // width: 0px;
}

// 轮播图
.bannerimg {
  width: 100%;
  height: 400px;
}
.poly {
  :deep(.el-carousel__indicator--horizontal .el-carousel__button) {
    width: 10px;
    height: 10px;
    background: transparent;
    border: 1px solid #ffffff;
    border-radius: 50%;
    opacity: 0.5;
  }
  :deep(.el-carousel__indicator--horizontal.is-active .el-carousel__button) {
    width: 10px;
    height: 10px;
    background: #ffffff;
    border-radius: 50%;
    opacity: 1;
  }
  :deep(.el-carousel__container) {
    height: 400px;
  }
}
// 图片弹窗头
html {
  position: relative;
}
html .picPop {
  position: absolute;
  left: 0;
  :deep(.vxe-modal--wrapper .vxe-modal--header) {
    background: #2a88e1 !important;
    color: #fff;
  }
  :deep(.vxe-modal--header-right) {
    transform: translateY(6%);
    font-size: 18px;
  }
}

// 检测弹窗选项
.first_line {
  font-size: 15px;
  display: flex;
  justify-content: space-between;
  padding: 0 25px 0 15px;
  text-align: center;
}
.first_line span {
  color: #23a0ff;
}

.second_line {
  font-size: 13.5px;
  margin: 15px;
  display: flex;
  justify-content: space-around;
  height: 50px;
}
.second_line_a {
  font-weight: 500;
  width: 80px;
  margin-right: 25px;
}
.second_line_b {
  transform: translateY(-10%);
  width: 80px;
}
.second_line_c {
  transform: translateY(-10%);

  width: 160px;
}
.third_line {
  font-size: 13.5px;
  font-weight: 500;
  width: 350px;
  // background: #e0dbdb;
  padding: 0 15px;
}
.third_line_a {
  display: inline-block;
  margin-right: 20px;
  transform: translateY(-5px);
}
.third_line button {
  position: absolute;
  right: 24px;
  top: 38.4%;
  margin: 0;
  padding: 0;
  width: 50px;
  border-radius: 10px;
  border: 1px solid #2ba3ff; //自定义边框
  color: #2ba3ff;
}
/* 修改表头宽高 */
.vxe_table_box {
  :deep(thead) {
    font-size: 13px;
    height: 10px;
  }
  :deep(tbody) {
    font-size: 13px;
  }
  :deep(.vxe-header--column) {
    line-height: 5px;
  }
  :deep(.body--wrapper) {
    scrollbar-color: #e9e9e9 #d8d8d8; /* 第一个方块颜色，第二个轨道颜色(用于更改火狐浏览器样式) */
    scrollbar-width: thin; /* 火狐滚动条无法自定义宽度，只能通过此属性使滚动条宽度变细 */
    -ms-overflow-style: none; /* 隐藏滚动条（在IE和Edge两个浏览器中很难更改样式，固采取隐藏方式） */
  }
  :deep(.body--wrapper::-webkit-scrollbar) {
    width: 5px;
    height: 4px; // 纵向滚动条 必写
    border: 1px solid #e9e9e9;
  }
  :deep(.body--wrapper::-webkit-scrollbar-thumb) {
    background-color: #d8d8d8;
    // border: 1px dashed #888888;
    width: 4px;
    height: 150px;
  }
}
/* 检测底部按钮组 */
.open_btns {
  position: absolute;
  right: 15px;
  bottom: 18px;
}
.open_btns button {
  margin: 0 5px 0 0;
  padding: 0;
  width: 75px;
  height: 22.8167px;
  border-radius: 10px;
  border: 1px solid #2ba3ff; //自定义边框
  color: #2ba3ff;
}

/* 分割线 */
.el-span {
  display: inline-block;
  margin-right: 30px;
  transform: translateY(-5px);
}
.baffle {
  clear: both;
  zoom: 1;
}
// 修复
.XF_first_line {
  float: right;
  width: 950px; //修改进度条宽度
}
.XF_first_line_a {
  margin-left: 300px;
}
.XF_first_line span {
  margin-right: 20px;
}
.XF_second_line {
  display: inline-block;
  margin-right: 30px;
}
// 修改input框长度
.detect_box {
  :deep(.vxe-input) {
    display: inline-block;
    position: relative;
    width: 310px;
    margin: 15px;
  }
  :deep(.vxe-input .vxe-input--search-icon) {
    color: #1c9cfe;
  }
}

.chart {
  height: 400px;
}
.vxe-button.type--button {
  float: right;
}
// 折叠按钮
.foldable_btn {
  float: right;
  margin-top: 0.5%;
}
/* 
    img 外侧盒子
*/
.guild_img_box {
  position: relative;
  width: 600px;
  height: 400px;
  margin: 0 auto;
  display: block;
  margin-bottom: 16px;
  box-shadow: 0 2px 4px -1px rgb(0 0 0 / 20%), 0 4px 5px 0 rgb(0 0 0 / 14%),
    0 1px 10px 0 rgb(0 0 0 / 12%) !important;
  border: 1px solid #e9e9e9;
  overflow: hidden;
}
.guild_img_box > img {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
  height: 100%;
}
.testReport {
  position: relative;
  width: 900px;
  height: 500px;
  margin: 0 auto;
  display: block;
  margin-bottom: 16px;
  box-shadow: 0 2px 4px -1px rgb(0 0 0 / 20%), 0 4px 5px 0 rgb(0 0 0 / 14%),
    0 1px 10px 0 rgb(0 0 0 / 12%) !important;
  border: 1px solid #e9e9e9;
  overflow: hidden;
}

.testReport > iframe {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  max-width: 100%;
  max-height: 100%;
}

.PopTable {
  position: absolute;
  overflow: hidden;
  left: -400%;
  top: 25%;
  width: 1000px;
  z-index: 99;
}
.start_time {
  position: absolute;
  color: black;
  left: -400%;
  top: 10%;
  z-index: 9999;
  height: 50px;
  line-height: 50px;
}

.end_time {
  position: absolute;
  color: black;
  left: -335%;
  top: 10%;
  z-index: 9999;
  height: 50px;
  line-height: 50px;
}

.time_search {
  position: absolute;
  left: -295%;
  top: 12%;
  z-index: 9999;
  color: white;
  border: none;
  outline: none;
  border-radius: 4px;
  background-color: #00c0ef;
  vertical-align: middle;
  width: 60px;
  height: 30px;
  margin-left: 96px;
}
.time_search_X {
  position: absolute;
  left: -265%;
  top: 12%;
  z-index: 9999;
  color: white;
  border: none;
  outline: none;
  border-radius: 4px;
  background-color: #00c0ef;
  vertical-align: middle;
  width: 60px;
  height: 30px;
  margin-left: 96px;
}
.time_search_XX {
  position: absolute;
  left: -235%;
  top: 12%;
  z-index: 9999;
  color: white;
  border: none;
  outline: none;
  border-radius: 4px;
  background-color: #00c0ef;
  vertical-align: middle;
  width: 60px;
  height: 30px;
  margin-left: 96px;
}

.list_title {
  margin-top: 2%;
  height: 25px;
  border-bottom: 2px solid #72ed5c;
  font-weight: 600;
  font-size: 15px;
  color: #80eeff;
}
</style>
